<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            .demo1 {
                background-color: antiquewhite;
            }
            .box1 {
                background-color: skyblue;
            }
            .box2 {
                background-color: orange;
            }
            .list {
                width: 200px;
                height: 200px;
                background-color: peru;
                /* 添加滚动条 */
                overflow: auto;
            }
            li {
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <h1>Hello {{name}}</h1>
            <h1>Vue中的事件修饰符</h1>
            <p>1. prevent: 阻止默认事件（常用）</p>
            <p>2. stop: 阻止事件冒泡（常用）</p>
            <p>3. once： 事件只触发一次（常用）</p>
            <p>4. capture: 使用事件的捕获模式</p>
            <p>5. self: 只有event.target是当前操作的元素才触发事件</p>
            <p>6. passive: 事件的默认行为立即执行，无需等待事件回调执行完毕。</p>

            <h1>捕获阶段和冒泡阶段</h1>
            <p>捕获阶段是由外向内，冒泡阶段是由内向外。</p>
            <p>默认情况下，事件使用冒泡事件流，不使用捕获事件流。</p>

            <h1>阻止默认行为</h1>
            <a href="https://www.bilibili.com" @click.prevent="showInfo">点我一下</a><br>
            
            <h1>阻止事件冒泡（常用）</h1>
            <div class="demo1" @click="showInfo">
                <a href="https://www.bilibili.com" @click.stop.prevent="showInfo">阻止冒泡并且阻止触发默认事件</a>
            </div>
            
            <h1>事件只触发一次（常用）</h1>
            <button @click.once="showInfo">点我提示信息</button>

            <h1>使用事件的捕获模式</h1>
            <div class="box1" @click.capture="showMsg(1)">
                div1
                <div class="box2" @click="showMsg(2)">
                    div2
                </div>
            </div>

            <h1>只有event.target是当前操作的元素才触发事件</h1>
            <p>只有我点你的时候才触发事件，通过冒泡上来的事件不触发。</p>
            <div class="demo1" @click.self="showInfo">
                <button @click="showInfo">点我提示信息</button>
            </div>

            <h1>事件的默认行为立即执行，无需等待事件回调执行完毕</h1>
            <p>不加passive，等demo函数中的语句执行完，滚动条才往下滑动；</p>
            <p>加上passive，不用等demo函数中语句执行完，滚动条就可以往下滑。</p>
            <p>对wheel生效，对scroll不生效。</p>
            <!-- 给滚动条增加触发事件 -->
            <ul @scroll="demo" class="list">
                <!-- 给滚轮增加触发事件 -->
            <!-- <ul @wheel.passive="demo" class="list"> -->
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示

            // 创建Vue实例，开端
            new Vue({
                el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
                data: {     // data中用于存储数据，数据供el指定的容器去使用
                    name: "任亭松"
                },
                methods: {
                    showInfo(e){
                        // 阻止默认行为（防止a标签直接跳转走了）
                        // e.preventDefault()
                        // 停止冒泡
                        // e.stopPropagation()
                        alert(this.name)
                    },
                    showMsg(num){
                        alert(num)
                    },
                    demo(){
                        for (let i = 0; i < 100; i++) {
                            console.log('#')
                        }
                        console.log("@@@")
                    }
                }
            })
        </script>
    </body>
</html>
